<template>
	 <div  class="item pl-1 pr-1 pt-1 pb-1 mr-1 mb-1" :style="getColor" @click="find">{{item}}</div>
</template>

<script>
	export  default {
		  data(){
			    return {
					
				}
		  },
		  props:{
			   item:{
				    type:String,
					default:""
			   },
			   color:{
				    type:Boolean,
					default:true
			   },
			   ind:{
				    type:Number
			   }
		  },
		  computed:{
			   getColor(){
				    if(!this.color){
						  return  `background-color:#F5F5F5;color:#717171;border:0`
					}else{
						let color = {
							borderColor:[ '#EEA6AA','#DD6A4B','#98D5D8','#9DBE93','#BCCD99' ],
							background:[ '#F8EAE9','#FFBEC6','#E8F6F6','#E4F5E2','#F2F6E8' ]
						};
						let index = Math.floor(Math.random()*color.borderColor.length);
						let borderColor = color.borderColor[index];
						let background=color.background[index];
						return `background-color:${background};border-color:${borderColor}`
					}
			   }
		  },
		  methods:{
			   find(){
				   this.$emit("findclick",this.ind)
			   }
		  }
	}
</script>

<style scoped>
	.item{
		background-color: #F5F5F5;
		color:#717171;
		border-width: 1px;
		border-style: solid;
	}
</style>
